import { useEffect, useState } from 'react'
import logo from './logo.svg'
import './App.css'
import { connect } from 'react-redux'
import { Top, Tab, TabItem } from './style'
import { useNavigate, NavLink } from 'react-router-dom'
import RouterConfig from './routes'

function App(props) {
  // console.log(props, '------------')
  const { users, singer } = props;
  const navigate = useNavigate()

  // 有了 redux 后，页面组件不再做数据管理
  return (
    <div className="App">
      {/* layout */}
      <Top>
        <span
          className="iconfont menu"
          onClick={() => alert("用户中心正在开发中，敬请期待:)")}
        >
          &#xe65c;
        </span>
        <span className="title">云音悦</span>
        <span
          className="iconfont search"
          onClick={() => navigate("/search")}
        >
          &#xe62b;
        </span>
      </Top>
      <Tab>
        <NavLink to="/recommend">
          <TabItem>
            <span>推荐</span>
          </TabItem>
        </NavLink>
        <NavLink to="/singers">
          <TabItem>
            <span>歌手</span>
          </TabItem>
        </NavLink>
        <NavLink to="/rank">
          <TabItem>
            <span>排行榜</span>
          </TabItem>
        </NavLink>
      </Tab>
      <RouterConfig />
      {/* {
        users.map(user => <div key={user.id}>{user.name}</div>)
      } */}
    </div>
  )
}
// state 是 redux 负责的所有子仓库数据
// connect 是 API
// 组件数据管理功能被收回 
// 组件通过 connect 连上 store 去管理数据
// redux 让数据管理更科学 开发工艺
// redux 就是数据管理学
const mapStateToProps = (state) => {
  // 把 store 中的 状态（数据）以props的形式 引到组件中
  // state 是 redux 给我的，叫做：状态树
  // redux 以 树 组织数据，state 树根
  return {
    // 首页想要展示singer数据
    singer: state.singer,
    users: state.user.users
  }
}

export default connect(mapStateToProps)(App)
// 高阶函数，函数的返回值仍是函数
